<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8" />
    <title>Custom Popup</title>
    <style>
        body {
            width: 250px;
            padding: 10px; /* Add some padding around the content */
            font-family: Arial, sans-serif;
            font-size: 14px;    /* Set a more readable font size */
        }

        /* Popup styles */
        #myCustomPopup {
          display: none; /* 初始状态隐藏 */
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: white;
          border: 1px solid black;
          padding: 20px;
          z-index: 1000; /* 确保弹窗在其他元素之上 */
          box-shadow: 0px 0px 10px rgba(0,0,0,0.2);  /* Add a subtle shadow */

        }
        #openPopupButton {
           background-color: #4CAF50; /* Green */
           border: none;
           color: white;
           padding: 10px 20px;
           text-align: center;
           text-decoration: none;
           display: inline-block;
           font-size: 16px;
           margin-bottom: 10px;  /* Add a little space below the button */
           cursor: pointer;    /* Change cursor to a pointer on hover */
           border-radius: 5px;   /* Round the corners */

        }


        #closeButton {
            background-color: #f44336; /* Red */
            border: none;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            cursor: pointer;
            border-radius: 3px;     /* Round the corners a bit */
        }
    </style>
</head>
<body>

    <!-- <button id="openPopupButton">打开弹窗</button> -->

    <div id="myCustomPopup">
        <!-- 弹窗内容 -->
        <p>这是一个自定义弹窗！ 点击外部不会关闭。</p>
        <button id="closeButton">关闭</button>
    </div>

    <script>
        // document.addEventListener('DOMContentLoaded', function() {
        //     const openButton = document.getElementById('openPopupButton');
        //     const closeButton = document.getElementById('closeButton');
        //     const popup = document.getElementById('myCustomPopup');

        //     openButton.addEventListener('click', function() {
        //         popup.style.display = 'block';
        //     });

        //     closeButton.addEventListener('click', function() {
        //         popup.style.display = 'none';
        //     });

        //     document.addEventListener('click', function(event) {
        //         if (popup.style.display === 'none') return; // 如果弹窗隐藏，不执行任何操作

        //         // 如果点击在弹窗内部或打开按钮上，不执行任何操作
        //         if (popup.contains(event.target) || event.target === openButton) {
        //             return;
        //         }

        //         // 点击弹窗外部，**不关闭弹窗** (移除或注释掉下面这行)
        //         // popup.style.display = 'none';
        //     });
        // });
    </script>

</body>
</html>
